<template>
	<div class="article">
		<!-- 1.0导航栏 -->
		<van-nav-bar title="标题" right-text="按钮" @click-left="$router.replace('/home')" fixed placeholder>
			<!-- 导航栏——左侧标签 -->
			<template #left>
				<i class="iconfont icon-zuojiantou"></i>
				<div class="logo">
					<i class="iconfont icon-N"></i>
					<i class="iconfont icon-E"></i>
					<i class="iconfont icon-W"></i>
				</div>
			</template>
			<!-- 导航栏——右侧标签 -->
			<template #right>
				<van-button round type="danger" size="mini" @click="followFn"
					:color="article.has_follow ? '#999999' : ''">
					{{article.has_follow ? '已关注' : '关注'}}
				</van-button>
			</template>
		</van-nav-bar>

		<!-- 2.1文章内容 -->
		<div class="article_main" v-if="article.type === 1">
			<h1 class="title">{{article.title}}</h1>

			<p class="author">
				{{article.user && article.user.nickname}}&emsp;{{article.create_date && article.create_date | formatDate}}
			</p>

			<article class="article_in" v-html="article.content"></article>
		</div>

		<!-- 2.2视频内容 -->
		<div class="video" v-else>
			<div class="video_group">
				<video 
				muted 
				ref="video" 
				class="video" 
				:src="article.content" 
				controls 
				:poster="article.cover && article.cover[0].url">
				</video>
				
				<i class="iconfont icon-ziyuan" @click="PlayOrPause" v-show="!isPlay"></i>
			</div>
			<div class="user_info">
				<van-image class="avator" fit="cover" round :src="article.user && article.user.head_img | imgUrl" />
				<span class="nickname">{{article.user && article.user.nickname}}</span>
				<van-button round type="danger" size="mini" @click="followFn"
					:color="article.has_follow ? '#999999' : ''">
					{{article.has_follow ? '已关注' : '关注'}}
				</van-button>

			</div>
			<div class="content" @dblclick="aa">{{article.title}}</div>
		</div>

		<!-- 3.0点赞分享 -->
		<div class="operate">

			<div class="btn" @click="likeFn" :class="{ isLike: article.has_like }">
				<i class="iconfont icon-dianzan1"></i>
				<span>{{article.like_length}}</span>
			</div>

			<div class="btn">
				<i class="iconfont icon-fenxiang"></i>
				<span>分享</span>
			</div>

		</div>
		<!-- 评论组件 -->
		<MyComment :article="article"></MyComment>

	</div>
</template>

<script>
	import MyComment from '../components/MyComment.vue'
	import { getToken } from '../utils/localData.js'
	import {
		getPostDetailsApi,
		updatePostLikeApi
	} from '../apis/news.js'
	import {
		userFllowApi,
		userunFllowApi
	} from '../apis/user.js'
	export default {
		mounted() {
			const videoDOM = this.$refs.video;
			
			videoDOM.addEventListener('play' , () => {
				this.isPlay = !this.isPlay;
			})
			videoDOM.addEventListener('pause' , () => {
				this.isPlay = !this.isPlay;
			})

		},
		components: {
			MyComment
		},
		
		data() {
			return {
				id: this.$route.params.id,
				article: {},
				isPlay: false
			}
		},
		/* body样式 */
		beforeCreate() {
			document.querySelector('body').setAttribute('style', 'background-color:#e7e7e7')
		},
		beforeDestroy() {
			document.body.removeAttribute('style');
		},
		
		
		async created(){
			const res = await getPostDetailsApi(this.id);
			this.article = res.data.data;
		},

		methods: {
			async followFn() {
				const {
					id
				} = this.article.user;
				if (this.article.has_follow) {
					await userunFllowApi(id)
						.then(() => {
							this.$toast.success("取消关注");
							this.article.has_follow = !this.article.has_follow;
						})
				} else {
					await userFllowApi(id)
						.then(() => {
							if(getToken()){
								this.$toast.success("关注！");
								this.article.has_follow = !this.article.has_follow;
							}
						})
				}

			},
			async likeFn() {
				await updatePostLikeApi(this.article.id)
					.then((res) => {
						if(getToken()){
							if (res.data.message === "点赞成功") {
								this.article.like_length += 1;
							} else {
								this.article.like_length -= 1;
							}
							this.article.has_like = !this.article.has_like;
							this.$toast(res.data.message);
						}
					})
			},

			PlayOrPause() {
				this.$refs.video.play();
			},
			
			aa(){
				console.log("dbc");
			}
		},


	}
</script>

<style lang="less" scoped>
	html,
	body {
		height: 1000px;
		width: 100%;
		background-color: aqua;
	}

	.isLike {
		color: #ff3100;
		border-color: #ff3100 !important;
	}

	.van-nav-bar {
		.logo {
			width: 70px;
		}

		/deep/.van-nav-bar__left {
			padding: 3px;
		}

		.icon-zuojiantou {
			font-size: 20px;
			color: #19a9fc;

		}

		.van-button {
			background-color: #ff3100;
			width: 60px;
			border: 0;
		}
	}

	.article {
		height: 100%;
		background-color: #e7e7e7;


		.article_main {
			padding: 0 20px;

			.title {
				font-size: 18px;
				padding: 10px 0;
				font-weight: bold;
			}

			.author {
				font-size: 14px;
				margin: 10px 0;

				color: #6b6b6b;
			}

			/deep/ .article_in {
				img {
					width: 100%;
					margin: 10px 0;
				}

				p {
					text-indent: 2em;
					font-size: 15px;
					line-height: 23px;
					text-align: justify;
				}

				.editor {
					text-align: right;
					font-size: 10px;
					font-weight: bold;
				}

				a {
					display: flex;
					font-size: 15px;
					flex-direction: column;
					justify-content: center;
					align-items: center;
				}
			}
		}

		.video {
			width: 100%;

			.video_group {
				display: flex;
				justify-content: center;
				align-items: center;
				video {
					position: relative;
					width: 100%;
					height: 300px;
					background-color: #666666;
				}

				.icon-ziyuan {
					font-size: 60px;
					position: absolute;
					z-index: 1;
					color: #FFFFFF;
				}

			}

			.user_info {
				margin-top: 20px;
				display: flex;
				padding: 0 10px;
				align-items: center;

				.avator {
					width: 35px;
					height: 35px;
				}

				.nickname {
					flex: 1;
					padding-bottom: 10px;
					margin-left: 10px;
					font-size: 15px;
					color: #777777;
				}

				.van-button {
					background-color: #ff3100;
					width: 60px;
					border: 0;
				}
			}

			.content {
				margin-top: 20px;
				padding: 0 10px;
			}
		}


		.operate {
			margin-top: 30px;
			display: flex;
			justify-content: space-evenly;
			align-content: center;
			height: 100px;

			.btn {

				width: 80px||100%;
				height: 30px;
				border: 1px solid #919191;
				border-radius: 15px;
				display: flex;
				justify-content: center;

				.iconfont {
					margin: auto;
					margin-left: 15px;
				}

				span {
					margin: auto 0;
					margin-right: 15px;
					font-size: 15px;
				}
			}
		}
	}
</style>
